<script lang="ts" setup>
import OpenAPIClientAxios from 'openapi-client-axios';
const api = new OpenAPIClientAxios({
    definition:"http://clusters.luo980.com:11004/apidocs.json",
    axiosConfigDefaults: {
      baseURL: 'http://clusters.luo980.com:11004'
    }
  })


const client = await api.init();

async function fetchGroups() {
    const groups = []
    const taskDistribution = ref([
      { type: 'command', count: 0 },
      { type: 'wasm', count: 0 },
      { type: 'pod', count: 0 },
      { type: 'device', count: 0 },
    ]);

    console.log(client)
    try{
      const response = await client['Get groups']({"Namespace":"test"})
      const groupData = response.data.items;
      console.log(groupData);

      for (const group of groupData) {
        for(const action of group.spec.actions){
          const runningType = action.spec.runtimes[0].type
          console.log(runningType)
          if(runningType == "command"){
            for(const data of taskDistribution.value){

              if(data.type == "command"){
                  data.count +=1
             }
            }
          }else if(runningType == "wasm"){
            for(const data of taskDistribution.value){

              if(data.type == "wasm"){
                  data.count +=1
             }
          }
        }else if(runningType == "pod"){
            for(const data of taskDistribution.value){

              if(data.type == "pod"){
                  data.count +=1
             }
          }
        }else if(runningType == "device"){
            for(const data of taskDistribution.value){

              if(data.type == "device"){
                  data.count +=1
             }
          }
        }

      }
      }
    }catch (error) { console.error(error); }
    return taskDistribution.value
  }  


  let interval : any
  const taskDistribution = ref()
  onMounted(() => {

      // 设置定时器，每 3 秒刷新一次数据
      interval = setInterval(async () => {
        try {
          taskDistribution.value = await fetchGroups();
          console.log("taskds"+taskDistribution.value[0].type)
          console.log(1111111111111111111111111111111111111);
        } catch (error) {
          console.error("Error fetching data:", error);
        }
      }, 5000);
    });

    onBeforeUnmount(() => {
      // 组件销毁前清除定时器
      if (interval) {
        clearInterval(interval);
      }
    });


    const clusterInfo = ref([
  {clusterName:"cloud1", clusterType:"云集群",status:"在线",NodeNum:"11",mainNode:"node1",taskNums:"99",runningTime:"99min"},
  {clusterName:"cloud2", clusterType:"云集群",status:"离线",NodeNum:"11",mainNode:"node2",taskNums:"99",runningTime:"99min"},
  {clusterName:"edge1", clusterType:"边集群",status:"Running",NodeNum:"11",mainNode:"node2",taskNums:"99",runningTime:"99min"},
])

const clusterDetailInfo = ref([
  {nodeName:"cloud1", isMainNode:"是",status:"在线",taskNums:"99",availableCpu:"1/20",availableMem:"32/64GB",availableGpu:"1/20",availableGpuMem:"32/64GB"},
  {nodeName:"cloud2", isMainNode:"是",status:"在线",taskNums:"99",availableCpu:"1/20",availableMem:"32/64GB",availableGpu:"1/20",availableGpuMem:"32/64GB"},
  {nodeName:"cloud3", isMainNode:"是",status:"在线",taskNums:"99",availableCpu:"1/20",availableMem:"32/64GB",availableGpu:"1/20",availableGpuMem:"32/64GB"},
])

</script>
<template>
    <v-container>
      <div class="showInfo grid grid-cols-4 ">
        <div class="subTitle">
          <p>运行中的任务分布</p>
          <div class="pickup">
            <span id="arr1" class="arrUp" @click="clickUp" ></span>
            <!-- <span class="arrDown" @click="clickDown" :style="{ 'border-top-color': color2 }"></span> -->
          </div>
        </div>
        
        <div class="showType">
            <div
              v-for="item in taskDistribution"
              :key="item.type"
              class="taskType flex flex-col items-center justify-center bg-blue-500 text-white rounded-full w-32 h-32 shadow-md cursor-pointer">
              <p class="text-2xl font-bold">{{ item.count }}</p>
              <p class="text-sm">{{ item.type }}</p>
            </div>
        </div>
        
        <div class="subTitle">
          <p>集群概览</p>
          <div class="pickup">
            <span id="arr2" class="arrUp" @click="clickUp2" ></span>
            <!-- <span class="arrDown" @click="clickDown" :style="{ 'border-top-color': color2 }"></span> -->
          </div>
        </div>
        <div class="workflow">
          <table class="table-auto w-full border-collapse border border-gray-300">
            <thead>
              <tr class="bg-gray-100">
                <th class="border p-2">集群名称</th>
                <th class="border p-2">集群类型</th>
                <th class="border p-2">状态</th>
                <th class="border p-2">集群节点数</th>
                <th class="border p-2">中心节点</th>
                <th class="border p-2">运行任务数</th>
                <th class="border p-2">在线时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="cluster in clusterInfo " :key="cluster.clusterName">
                <td class="border p-2" >{{cluster.clusterName }}</td>
                <td class="border p-2" >{{ cluster.clusterType }}</td>
                <td class="border p-2">
                  <span
                    class="px-2 py-1 rounded-full text-white"
                  >
                    {{ cluster.status }}
                  </span>
                </td>
                <td class="border p-2">{{ cluster.NodeNum }}</td>
                <td class="border p-2">{{ cluster.mainNode}}</td>
                <td class="border p-2">{{ cluster.taskNums }}</td>
                <td class="border p-2">{{ cluster.runningTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
              
            
        <div class="subTitle">
          <p>集群信息</p>
          <div class="pickup">
            <span id="arr2" class="arrUp" @click="clickUp2" ></span>
            <!-- <span class="arrDown" @click="clickDown" :style="{ 'border-top-color': color2 }"></span> -->
          </div>
        </div>
        <div class="workflow">
          <table class="table-auto w-full border-collapse border border-gray-300">
            <thead>
              <tr class="bg-gray-100">
                <th class="border p-2">节点名称</th>
                <th class="border p-2">中心节点</th>
                <th class="border p-2">状态</th>
                <th class="border p-2">运行任务数</th>
                <th class="border p-2">可用CPU</th>
                <th class="border p-2">可用内存</th>
                <th class="border p-2">可用GPU</th>
                <th class="border p-2">可用显存</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="cluster in clusterDetailInfo " :key="cluster.nodeName">
                <td class="border p-2" >{{cluster.nodeName }}</td>
                <td class="border p-2" >{{cluster.isMainNode }}</td>
                <td class="border p-2">
                  <span
                    class="px-2 py-1 rounded-full text-white"
                  >
                    {{ cluster.status }}
                  </span>
                </td>
                <td class="border p-2">{{ cluster.taskNums }}</td>
                <td class="border p-2">{{ cluster.availableCpu }}</td>
                <td class="border p-2">{{ cluster.availableMem}}</td>
                <td class="border p-2">{{ cluster.availableGpu}}</td>
                <td class="border p-2">{{ cluster.availableGpuMem }}</td>
              </tr>
            </tbody>
            
          </table>
        </div>
      </div>
    </v-container>
  </template>
<style>
.pickup {
  height: 30px;
  margin-top: -15px;
  margin-left: auto;
  margin-right:5%;
}
.showInfo {
  display: flex;
  flex-direction: column;
}
.subTitle {
  margin-top: 20px;
  position: relative;
  left: 0;
  border: #000 1px solid;
  display:flex;
  width: 100%;
  height: 30px;
}
.taskType {
  display: inline-flex;
  margin: auto;
  align-items: center;
}
.showType {
  position: relative;
  border: #000 1px solid;
  display:flex;
  width: 100%;
  height: 200px;
  align-items: center;
}
.arrUp {
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid blue;
  cursor: pointer;
}

.arrDown {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid gray;
}
</style>